import React, { useState } from 'react';
import styles from './style.less';
import { Tabs } from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import logo from '../../../asserts/favicon.png';
import tools from '../list/tools'
import { history } from 'umi';


const { TabPane } = Tabs;

export default function ({ match }) {

  const [tabActiveKey, setTabActiveKey] = useState(match.params.toolName)

  const [tabContent, setTabContent] = useState()

  const tabContentList = {};
  const tabList = tools.map(element => {
    element.tab = element.title;
    tabContentList[element.key] = element
    return element;
  });

  const onTabChange = (key => {
    setTabActiveKey(key);
    console.log(key)
    history.push(tabContentList[key].linkUrl)
  })

  return (
    <div className={styles.container}>
      <PageHeaderWrapper avatar={{ src: logo }} tabActiveKey={tabActiveKey} title='程序猿实用工具集' tabList={tabList} onTabChange={onTabChange}>
        {tabContentList[tabActiveKey].content}
      </PageHeaderWrapper>
    </div>
  );
}
